…rip homogeneity

- Replace single vertical-column example with 3 structurally different
  examples (split horizontal, single dominant, equal grid)
- Add structural diversity check: no two architectures share same wireframe
- List 8 layout shapes to draw from (centered, split, bottom-anchored,
  grid, single-dominant, list, diagonal, timeline)
- Strip "every token must be used" — tokens only where concept needs them
- Canvas backgrounds now config-driven objects (type + params) instead of
  hardcoded string types — same primitives, contextual parameters
- Added text renderer primitive for falling characters

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Remove hard element counts and "never/always/every" mandates that forced
visual clutter and prevented minimal compositions:

- video-composition.md: replace "8-10 elements per scene" with density-as-
  creative-choice; soften "fill the frame" to "use the frame"; replace
  "two focal points minimum" with focal hierarchy; allow solid backgrounds
  and deliberate stillness
- house-style.md: remove "2-5 decoratives per scene" count and "1 decorative
  is under-dressed"; decoratives are a tool, not a requirement
- prompt-expansion.md: remove "required 2-5 from house-style" and element
  padding; density matches the emotional beat

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ckgrounds

- Picker outputs video-specific design.md lookbook: palette with accent
  discipline, typography table at video scale, surface & depth, motion
  personality with easing signature, transition mood, composition rules,
  pacing guidance (1 word/sec), do's and don'ts
- Brief questions use lettered multiple choice (A, B, C, D) for faster
  interaction
- Strip procedural canvas backgrounds and SVG illustrations from template
  (quality insufficient, will revisit with showcase rewrite)
- Fix template syntax errors from background removal (trailing ||, dangling
  comma, orphaned bgDescs object)
- design-picker.md describes new output format (director's lookbook)
- Strip remaining prescriptive density from prompt-expansion and
  video-composition (motion, focal hierarchy, frame composition)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Phase 2 right panel is now a scrollable design system showcase:
- Overview, Palette swatches, Typography specimens, Scene grid,
  Motion easing preview, Elevation cards, Radius chips
- All sections themed via CSS custom properties from selected palette
- Fix max-width: 100% clamping scene frames (was preventing scale)

Architecture preview frames guidance:
- Agents must follow video-composition.md, house-style.md, and
  motion-principles.md when generating preview frame HTML
- 4 frames map to beat structure: hook, proof, action, close
- Use real content from prompt, not placeholders
- Frames are static but should look paused mid-animation
- Strip old 15-element checklist and "every token must be used"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…rames

- design-picker.md: tokens are mandatory in ALL preview frame HTML — never
  hardcode colors, fonts, spacing, or radii. The preview must update live
  when Phase 2 options change.
- Explicit guidance to follow video-composition.md, house-style.md, and
  motion-principles.md when generating preview frames
- Fix easing option not calling renderPreview()
- Fix max-width:100% clamping scene frames in showcase

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Restructure design-picker.md to force creative thinking BEFORE code:
1. "What is unique about THIS prompt?" — visual vocabulary, emotion as
   layout, surface context, anti-competition
2. Verbalized sampling with reasoning paths — from subject, emotion,
   audience, anti-pattern, unusual format
3. Rate concepts HIGH/MID/LOW, keep 3+ LOW boards
4. Anti-mode-collapse check
5. THEN generate data

The creative process is now a HARD-GATE before the data format section.
Previously agents skipped straight to architecture HTML and produced
identical layouts across different projects.

Also: mandatory token usage rule strengthened — never hardcode colors,
fonts, spacing, or radii in preview frames.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

… cards

- Reorder showcase sections to match left panel: Overview → Composition →
  Palette → Typography → Corners → Depth → Motion
- Motion dot animates with selected ease in BOTH directions (no snap-back),
  bigger dot (24px), taller track
- Kill existing GSAP tweens before restarting on option change
- Elevation shows shapes with selected shadow/radius (no labels)
- Radius shows content cards ($1,299, 28°C, Oia) + buttons with selected
  radius applied — real content, not abstract chips
- Fix easing onclick missing renderPreview() call

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…r, design.html output

Design picker overhaul:
- Three.js animated 3D gradient backgrounds (sphere/waterPlane/plane) with
  ShaderGradient-inspired presets (Halo, Mint, Cosmic, Nighty Night, Sunset,
  Cotton Candy, Glass, Blob) plus prompt-contextual custom shaders
- Per-preset controls (speed, wave height, wobble, camera angle/tilt/zoom)
- Custom ease bezier editor with multi-waypoint SVG path support (GSAP CustomEase)
- design.html output replaces design.md — self-contained HTML with CSS variables,
  structured JSON spec, and working Three.js shader module script
- Verbalized sampling with probability scoring for mood board generation
- Strict data schemas for picker template (palette, type pair, architecture fields)
- Bug fixes: checkReady semicolon, density section HTML, scaleScenes resize
  listener leak, WebGL context cleanup, _sgUpdateBg debounce

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copy prototype from rawblock and replace the four hardcoded data values
(PALETTES, PROMPT_TEXT, ALL_TEMPLATES, header subtitle) with placeholder
tokens (__PALETTES_JSON__, __PROMPT_TEXT_JSON__, __TEMPLATES_JSON__,
__PROMPT_DESC__) so build-template-picker.py can inject prompt-specific
data at skill-invocation time.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

All text pools (headlines, body, stats, labels, smalls) now read from
PROMPT_TEXT instead of hardcoded arrays. Four placeholders:
__PALETTES_JSON__, __PROMPT_TEXT_JSON__, __TEMPLATES_JSON__, __PROMPT_DESC__

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Templates use three different slide architectures:
- .slide.active toggle (16 templates)
- horizontal flex-scroll (8 templates: signal, studio, etc.)
- <deck-stage> web component (10 templates)

Auto-detect system via getSlides(), scroll-based navigation for
flex layouts, component-aware queries for deck-stage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ipts

Templates set opacity:0 and transform offsets for entrance animations.
Since we strip all scripts, those animations never fire and content
stays invisible. Reset opacity:0 → 1 and stuck transforms after load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Inject fallback CSS for <deck-stage> since its JS gets stripped.
Makes it a 1920x1080 block container with absolute slides toggled
by .active class. Use visibility instead of display:none for slide
switching to work with both div and section slides.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…picker.html

Guard mood-title, mood-grid, pal-bar, mood-next-btn references so
pick-design.html works when Phase 1 is replaced by template picker.
Add handleTemplatePick bridge that reads sessionStorage/postMessage
and auto-advances to Phase 2 with selected template metadata.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

When bridging from template picker, replace the static preview_frames
with a live iframe of the selected template. Includes slide cycling,
deck-stage fallback CSS, opacity reset for animation start states,
and scroll-mode detection for flex-scroll templates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

When pick-design.html is opened from the template picker bridge,
rewrite the Direction tab to show '← Template' and navigate back
to template-picker.html instead of showing the empty moodboard view.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace moodboard HTML with iframe to template-picker.html. Tab says
'1. Template'. Clicking a template sends postMessage to parent which
triggers goToTune() — no page navigation, no flash. Template picker
and fine-tune live on the same page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Click a template card: background fades to black, card scales up
and fades out over 450ms, then Phase 2 fades in with subtle slide-up.
Smooth handoff between browsing and configuring.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Card scales to 3.5x (well beyond viewport) over 0.8s with
cubic-bezier easing. Background fades to black over 0.5s.
Card fades out at 0.4s delay. Phase 2 slides in over 0.6s.
Total transition ~900ms for cinematic feel.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace two-class transition with one keyframe animation.
scale(1)→scale(4) over 0.9s, opacity fades after 60%.
cubic-bezier(0.4,0,0,1) for smooth acceleration.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Force --f-disp/--f-head/--f-body/--f-sans with !important in the
injected override CSS. Typography changes now propagate to the entire
design page, not just slide cards.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ttes

Add NATIVE_FONTS lookup with display/body font + weight for all 34
templates. TYPEPAIRS[0] updates to Template Default on template pick.
Disable updateDefaultTypeFromIframe to prevent overwrites. Load native
Google Fonts on template selection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

When a shader preset is selected, html/body/cover backgrounds go
transparent so the full-page shader canvas shows through the title
area. bg-veil opacity reduced to 40% for better shader visibility.
No shader selected = opaque backgrounds as before.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Fix CSS scoping regex to skip decimal values (.9, .5rem)
- Add <base href> for path resolution from .hyperframes/
- Fix palette field names, DENSITIES, __SHADOW__ token mapping
- Add updateSlideIframes() for live config on template slides
- Wire design.html/summary.html to var(--cr/--pad/--gap/--shadow)
- Add .tp-card.provided CSS + DESIGN_MD auto-advance
- New: build-design-picker.py, lint-design-html.py, user-design templates
- Skill: agent-crafted DESIGN.html pipeline, CSS token hard-gate

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Cover HARD-GATE: system feel, not product story
- Anti-convergence: never same cover structure twice
- Design thinking from frontend-design skill
- Font resolution: local fonts/ → Google Fonts → substitute
- Updated SKILL.md and design-picker.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

New reference: design-html-templates.md — guides agents to extract
slide template CSS separately from page chrome CSS. Prevents agents
from building compositions using the showcase page styles instead of
the actual template styles.

Updated design-html.md workflow to reference template extraction.
Updated SKILL.md Step 1 to trigger template extraction when
DESIGN.html contains a template gallery.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

….html in picker

- build-design-picker.py: skip copying design.html and summary.html
  if they already exist in the output directory. Agent-crafted files
  take priority over generic templates.
- design-picker.html: renderDesignIframe() checks for DESIGN.html at
  project root when user-design is selected. Hero and specimen iframes
  also prefer DESIGN.html over templates/user-design/template.html.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

New reference: figma-to-design-html.md — lossless extraction of
design tokens from Figma via MCP or REST API. Covers file structure
discovery, color/typography/surface extraction, and REST API
reference for when MCP is rate-limited.

Updated SKILL.md Step 1 to add Figma URL as input path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Step 6: export Figma components as lossless SVG via REST API
- Step 7: build slides as component references, not generic archetypes
- Slides contain inline SVGs of buttons, tags, illustrations
- Agent copies slide HTML/SVG structure directly into compositions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Export illustrations, icons, graphics as SVG — they appear directly
  in video frames. UI components (buttons, inputs) inform CSS only.
- Slides are video frames with inline SVG assets, not component specs
- Asset priority: illustrations > icons > graphics > logo > colors > type
- Always prefer SVG for lossless, scalable, animatable assets

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- New lint rules: svg-hardcoded-fill and svg-hardcoded-stroke catch
  fill="#hex" and stroke="#hex" in inline SVGs
- Updated hard-gate to explicitly cover SVG attributes
- Lint must run on both design.html AND summary.html
- SVG color tokenization guide in figma-to-design-html.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Move shadow CSS values into DEPTHS array (dp.css), eliminate 5
  duplicate ternary chains across design-picker.html
- Pre-compile regex patterns in lint-design-html.py at module load
- Use compiled patterns in lint() instead of re-compiling per call

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Inject html,body{overflow-y:auto!important} in picker-override CSS
  so all design.html iframes scroll (fixes Biennale Yellow, Sakura Chroma)
- Add scroll-behavior:smooth for nav anchor links

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…values

32 of 34 templates had wrong colors in NATIVE_PALETTES. Regenerated
all entries by parsing --tp-primary/secondary/tertiary/accent from
each template.html file. Template Default palette now matches the
actual template colors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…html.md

Combined design-html.md and design-html-templates.md into a single
guide. Added HyperFrames shader adaptation section with GSAP-proxy
pattern, UMD script loading, and config extraction table. Updated
SKILL.md Step 1 to reference the unified guide.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- SKILL.md: when no design file exists, proactively offer A/B/C choice:
  A) template picker (recommended), B) style preset, C) fast path
- design-picker.html: inject GSAP entrance animation into design iframe
  only on init and when easing changes. Elements slide in from offscreen
  right as true leaf nodes, staggered 80ms. Custom ease uses CustomEase
  plugin with registered bezier path.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

…tml templates

16 design.html files had --canvas-alias:var(--primary) in ds-tokens
when the canvas color should alias to var(--secondary). Fixed by
swapping the alias targets so body background resolves to the canvas
color and text aliases resolve to the text color.

Affected: biennale-yellow, block-frame, blue-professional, bold-poster,
capsule, cartesian, cobalt-grid, coral, creative-mode,
editorial-tri-tone, long-table, neo-grid-bold, playful, raw-grid,
retro-zine, scatterbrain.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

- Reset all config picks + scroll sidebar on new template selection
- Tab shows "1. Template" on grid, "← Template" on fine-tune, resets on back
- Custom ease editor collapses when not selected, expands with curve rendered
- Gap between "Custom" label and bezier path string
- In-place easing animation without page reload/flash
- Snap to top before entrance animation on easing change
- Remove scroll-behavior:smooth (instant snap)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

…design.html templates"

This reverts commit e8c0a29.

The rebuild from template.html --tp-* values used the wrong convention.
design.html files use primary=canvas/light and secondary=text/dark
for most templates (opposite of template.html convention).
Restoring the original handcrafted values that match design.html.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

- Conditional --tp-* role mapping based on template polarity:
  STANDARD light themes swap primary/secondary; FLIPPED/DARK preserve.
- Skip --tp-tertiary/--tp-accent rewrite for Template Default
  (preserves native sunglow, accent canvas, etc).
- Apply --tp-tertiary/--tp-accent rewrite only when user picks non-default palette.
- Template Default chip now uses NATIVE_TEMPLATE_PALETTES for accent/tertiary
  so swatch matches actual slide colors.
- Drop .slide.dark/.light/.orange picker overrides — let template's native CSS
  govern (fixes studio yellow text, mat header visibility).
- Inject --tp-* via setProperty on documentElement instead of style tag
  (wins specificity battle, preserves other CSS vars in template :root).
- Re-run updateSlideIframes from specimen load handler so newly-created
  specimens get palette injection.
- Add .presentation to slide-positioning override (fixes cartesian/coral
  layout collapse).
- block-frame NATIVE_PALETTES now matches template native (yellow + black
  instead of cool blue variant).
- Studio accent updated to template native #f5d200.
- Signal summary.html slides replaced with real template.html content
  (strip data-anim/data-delay + inner comments for picker compatibility).
- Add prev/next nav arrows in header showing current template name,
  hover tooltips show prev/next names. Hidden in Phase 1.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Picker:
- Per-swatch contrasting text from bg luminance
- Strip --tp-accent from scoped CSS so palette change propagates
- Inject --tp-accent in design.html override for live update
- Default option highlighted as active on template change
- Guard empty MOODBOARDS in goToTune
- Cap .swatch .name with nowrap+ellipsis
- Tighter cover-headline clamps (scatterbrain/playful/monochrome)
- bold-poster + playful palette overflow guards

Skill:
- design-picker.md polarity rule: primary=light, secondary=dark

Templates:
- Fix flipped --cream/--ink aliases (daisy-days, monochrome,
  peoples-platform, coral, sakura-chroma)
- stencil-tablet --ink/--bone direction fix
- bold-poster tertiary uses curated value
- monochrome swatch reorder for picker nth-child injection
- scatterbrain + daisy-days swatches inherit color contrast
- Strip orphan @import (block-frame, coral, retro-zine)
- Add 'active' class to slides (block-frame, retro-windows, scatterbrain)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

- Surface section reacts to corners/density/depth picks via picker-override
- Skip override when picks null so template native values stay in effect
- Mark default option active for palette + type only (others use template native)
- Scroll preview to surface section on corners/density/depth change
- Create design.html button always visible in tune phase
- On template change, scroll iframe preview to top with retry
- Hide bg-veil + force #design-bg opacity 1 + section transparency when shader active
- Persist brightness/contrast/saturation/grain across shader changes via window._sgRender
- Render shader controls before sel so preset._render is wired before renderPreview
- getBgColors falls back to PALETTES[0] (template native) when picks.palette null
- Force _lastBgModeKey null after iframe rebuild so palette changes re-bake shader uniforms
- Guard MOODBOARDS empty in goToTune
- Strip --tp-accent from scoped template-css, inject in design.html :root for live update

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

- New pick command builds the picker HTML via the skills python script
- Serves the result locally and opens the browser
- Routes /templates/<slug>/* to the installed skills presentations dir
- Runs build from a neutral cwd so design.md auto-detect doesn't skip the templates page
- Reads/creates .hyperframes/picker-data.json with a sane default
- Help group entry + cli.mdx documentation

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

- .hyperframes/ — generated picker HTML and per-project picker data
- /templates/ — user-design template scaffolded by the picker build script

…nd feature flag

…ross phases